<!-- 表格 -->
<template>
  <div class="table">
    <el-table :data="tableData" style="width:100%;" :max-height="elTableHeight ? elTableHeight : 'auto'"
      :header-cell-style="{ color: table_header_font_color, backgroundColor: table_header_bgcolor }" border>
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
        :width="item.width" :fixed="item.fixed" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row[item.prop] ? scope.row[item.prop] : '--' }}
        </template>
      </el-table-column>
      <!-- 操作列宽度自适应 start -->
      <el-table-column fixed="right" :width="actionColWidth < 90 ? 90 : actionColWidth" label="操作"
        v-if="actionColShow && actionColBtnShow">
        <template slot-scope="scope">
          <div class="table_action_col flex_row_center_center" ref="tableActionCol">
            <slot name="actionCol" :scope="scope"></slot>
          </div>
        </template>
      </el-table-column>
      <!-- 操作列宽度自适应 end -->
    </el-table>
    <Pagination v-if="paginationShow" :pagination="pagination"/>
  </div>
</template>
<script>
// 引入全局变量样式文件
import variables from '@/assets/scss/base.module.scss';
import Pagination from '@/components/Common/Pagination.vue';
export default {
  naem: 'Table',
  components: {
    Pagination
  },
  props: {
    // 带有默认值的数组
    tableData: {
      type: Array,
      //对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return [];
      }
    },
    tableColumn: { //表格列
      type: Array,
      default: function () {
        return [];
      }
    },
    actionColShow: { //操作列是否显示
      type: Boolean,
      default: false,
    },
    tableHeight: { //表格高度
      type: Number,
      default: 0,
    },
    paginationShow: { //分页是否显示
      type: Boolean,
      require: false,
      default: true,
    },
    pagination: { //分页
      type: Object,
      require: false,
      default: function () {
        return {
          page: 1,
          size: 20,
          pageSize: [20, 50, 100, 200, 500],
          total: 0
        }
      }
    },
  },
  data() {
    return {
      ...variables, //使用全局scss变量
      actionColWidth: 80, //表格操作列宽度,
      actionColBtnShow: true, //操作列按钮是否显示 
    }
  },
  computed: {
    elTableHeight: {
      get() {
        return this.paginationShow ? (this.tableHeight - 42) : this.tableHeight; //37为pagination的高32+它的margin-top:10
      },
      set(val) {
        return val;
      }
    }
  },
  mounted() {
    this.updateActiveColWidth();
  },
  methods: {
    //更新操作列宽度
    updateActiveColWidth() {
      this.$nextTick(() => {
        //给表格操作列宽度多出50px，否则显示不完整
        let width = 50;
        let len = 0; //操作列按钮数量
        if (this.$refs.tableActionCol && this.$refs.tableActionCol.children) {
          //使用Array.from()对xxx.children获取到的HTMLCollection伪数组进行转换(或解构赋值)
          len = Array.from(this.$refs.tableActionCol.children).length;
          Array.from(this.$refs.tableActionCol.children).forEach(item => {
            width += item.offsetWidth;
          });
          //赋值给绑定值
          this.actionColWidth = width;
        } else {
          this.actionColWidth = 90;
        }
        this.actionColBtnShow = len > 0 ? true : false;
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.table {
  max-height: 100%;
  position: relative;

  .el-table {
    font-size: $table_font_size;

    // 修改表格cell的padding
    :deep td {
      padding: 0;
      font-size: $table_cell_font_size;
    }

    .table_action_col {
      height: 100%;
    }

    // 表格滚动条那一栏顶部多出空白 start
    :deep .el-table__fixed-right-patch {
      background: $table_header_bgcolor !important;
    }

    // 表格滚动条那一栏顶部多出空白 end

    //表格滚动条空白的border有颜色 start
    :deep .el-table__cell:nth-last-child(1) {
      border-right: 1px solid $table_header_bgcolor !important;
    }

    //表格滚动条空白的border有颜色 end
  }
}
</style>